<template>
  <div id="investmentRecord">
    <!-- 能耗管理背景 -->
    <div class="title"></div>
    <div class="content">
      <div class="tablehead">
        <el-row>
          <el-col :span="3">
            <div>序号</div>
          </el-col>
          <el-col :span="4">
            <div>楼层</div>
          </el-col>
          <el-col :span="8">
            <div>招商名称</div>
          </el-col>
          <el-col :span="4">
            <div>价格</div>
          </el-col>
          <el-col :span="5">
            <div>时间</div>
          </el-col>
        </el-row>
      </div>
      <div class="vue-seamless" @click="flyToFloor($event)">
        <vueSeamlessScroll :data="investmentRecordData" class="seamless-warp">
          <div v-for="(item, index) in investmentRecordData" :key="index"  >
            <div class="tableitem">
              <el-row
              ><!--@click.native="flyToFloor(item)"-->
                <el-col :span="3"
                >
                  <div class="itemdiv" :data-obj="JSON.stringify(item)">
                    {{ index + 1 }}
                  </div>
                </el-col
                >
                <el-col :span="4"
                >
                  <div class="itemdiv" :data-obj="JSON.stringify(item)">
                    {{ item.floor }}
                  </div>
                </el-col
                >
                <el-col :span="8"
                >
                  <div class="itemdiv" :data-obj="JSON.stringify(item)">
                    {{ item.enterpriseName }}
                  </div>
                </el-col
                >
                <el-col :span="4"
                >
                  <div class="itemdiv" :data-obj="JSON.stringify(item)">
                    {{ item.price }}
                  </div>
                </el-col
                >
                <el-col :span="5"
                >
                  <div class="itemdiv" :data-obj="JSON.stringify(item)">
                    {{ item.leaseStartTime }}
                  </div>
                </el-col
                >
              </el-row>
            </div>
          </div>
        </vueSeamlessScroll>
      </div>
      <!-- <el-table
        :data="investmentRecordData"
        style="width: 100%"
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-class-name="addclass"
        :cell-style="{ 'text-align': 'center' }"
        @row-click="detailClick"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            <marquee>{{ scope.row.id }}</marquee>
          </template>
        </el-table-column>
        <el-table-column prop="floor" label="楼层"></el-table-column>
        <el-table-column label="招商名称">
          <template slot-scope="scope">
            <marquee>{{ scope.row.building }}</marquee>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="startTime" label="时间"> </el-table-column>
      </el-table> -->
      <div class="info-popups" v-show="isShow">
        <div class="header"><span>企业信息</span><i @click="closeProp" class="el-icon-close"></i></div>
        <div class="details">
          <div class="floor">楼层：{{ enterpriseInfo.floor }}</div>
          <div class="enterpriseName">企业名称：{{ enterpriseInfo.enterpriseName }}</div>
          <div class="enterpriseType">企业类型：{{ enterpriseInfo.enterpriseType }}</div>
          <div class="price">招商价格：{{ enterpriseInfo.price }}</div>
          <div class="contacts">联系人：{{ enterpriseInfo.contacts }}</div>
          <div class="telephone">联系电话：{{ enterpriseInfo.telephone }}</div>
          <div class="leaseStartTime">入驻时间：{{ enterpriseInfo.leaseStartTime }}</div>
          <div class="leaseEndTime">结束时间：{{ enterpriseInfo.leaseEndTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryFmLeaseList } from "../../api/index";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  data () {
    return {
      enterpriseInfo: {},
      isShow: false,
      investmentRecordData: [
        {
          id: 1,
          floor: "1 楼",
          building: "湖南耐普泵业股份有限公司",
          price: "28万元/年",
          date: "2021-06-12",
        },
        {
          id: 2,
          floor: "3 楼",
          building: "长沙开元仪器有限公司",
          price: "12万元/年",
          date: "2021-06-01",
        },
        {
          id: 3,
          floor: "2 楼",
          building: "湖南博雅智能装备股份有限公司",
          price: "34万元/年",
          date: "2021-04-29",
        },
        {
          id: 4,
          floor: "5 楼",
          building: "山河智能装备股份有限公司",
          price: "26万元/年",
          date: "2021-03-15",
        },
        {
          id: 5,
          floor: "4 楼",
          building: "湖南维胜科技电路板有限公司",
          price: "21万元/年",
          date: "2021-03-14",
        },
      ],
      businessData: []
    };
  },
  methods: {
    detailClick (row, col) {
      window.Sgworld.execute("grapi", "business", { visibility: true }, null);
      window.Sgworld.execute(
        "factory",
        "callEvent",
        { eventName: "ClickObjectCallBack", param: "1" },
        (res) => {
          window.Sgworld.flyTo(
            res.args.location.x,
            res.args.location.y,
            res.args.location.z,
            0,
            -40,
            90,
            10040,
            () => {
            },
            4
          );
          res.name = row.building;
          res.floor = row.floor;
          res.price = row.price;
          res.date = row.startTime;
          window.showInvestment(res);
        }
      );
    },
    addclass ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "firFont";
      }
    },
    getData () {
      queryFmLeaseList().then((res) => {
        this.investmentRecordData = JSON.parse(JSON.stringify(res.data));
      });
    },
    flyToFloor (e) {
      if (e.target.dataset.obj) {
        this.isShow = true
        this.enterpriseInfo = JSON.parse(e.target.dataset.obj);
        console.log(this.enterpriseInfo);
        let items = JSON.parse(e.target.dataset.obj);
        for (var i = 0; i < this.businessData.length; i++) {
          var item = this.businessData[i];
          if (item.name.indexOf(items.enterpriseName) != -1) {
            window.Sgworld && window.Sgworld.flyTo(item.location.x, item.location.y, item.location.z, 0, -90, -90, 1500, () => {
            }, 2);
          }
        }
        if (items.floor === "5F" || items.floor === "F5") {
          window.Sgworld.execute(
            "grapi",
            "business",
            { visibility: true, floor: 5 },
            null
          );
        } else if (items.floor === "6F" || items.floor === "F6") {
          window.Sgworld.execute(
            "grapi",
            "business",
            { visibility: true, floor: 6 },
            null
          );
        }
      }
    },
    closeProp(){
      this.isShow = false
    }
  },
  mounted () {
    this.getData();
    window.Sgworld.execute("grapi", "GetBusiness", {}, (e) => {
      var temObj = e.args;
      this.businessData.push(temObj);
    });
  },
};
</script>
<style scoped>
#investmentRecord {
  width: 4096px;
  height: 600px;
  background-color: antiquewhite;
  position: absolute;
  background: url("/static/images/bottomBackground.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title {
  width: 732px;
  height: 65px;
  background: url("/static/images/operate/investmentRecord.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 1110px;
  margin-top: 100px;
}
.content {
  width: 1917px;
  height: 410px;
  margin-left: 1110px;
  padding-top: 20px;
}
.tablehead {
  width: 1917px;
  height: 50px;
  background: linear-gradient(to bottom, rgb(59, 153, 253), transparent);
  color: white;
  font-size: 28px;
  text-align: center;
}
.seamless-warp {
  height: 350px;
  overflow: hidden;
}
.tableitem {
  border: 1px dashed rgb(59, 153, 253);
  color: white;
  font-size: 20px;
  text-align: center;
  border-right: none;
  border-left: none;
  width: 1917px;
  height: 50px;
}
.itemdiv {
  margin-top: 20px;
}
.el-table /deep/ td,
.el-table /deep/ th {
  border-bottom: none !important;
}
.el-table::before {
  height: 0 !important;
}
.seamless-warp .tableitem {
  padding: 10px 0;
  font-size: 25px;
}
.seamless-warp .tableitem:hover {
  cursor: pointer;
  background-color: rgba(0, 174, 255, 0.37);
}
/* 招商信息弹窗 */
.info-popups {
  width: 977px;
  height: 663px;
  background: url("../../../static/images/popups/弹窗.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -1000px;
  left: 1562px;
}
.info-popups .header {
  width: 95%;
  height: 90px;
  line-height: 90px;
  font-size: 36px;
  text-align: right;
  color: #fff;
}
.info-popups .header span {
  margin-right: 660px;
  font-size: 42px;
}
.info-popups .header i:hover {
  color: #0f86f8;
}
.info-popups .details {
  color: #fff;
  font-size: 32px;
  padding: 48px 0 0 72px;
}
.info-popups .details div {
  margin-bottom: 20px;
}
</style>
